<template>
  <div class='content'>
    <div class='title'>
      <div>
        <div class='op'></div>
        <p>预算信息</p>
      </div>
      <div class='btn'>
        <a-button @click='exportToPDF' type='primary'>下载科技预算书</a-button>
        <a-button type='primary'>WBS导出</a-button>
      </div>
    </div>
    <div class='maintain1' id='maintain1'>
      <div style='width:100% '>
        <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>1、科技项目(课题)总概算</div>
        <div class='table-box'>
          <a-table :columns='allPriceForm' :data-source='formPriceAll' bordered :pagination='false'>
          </a-table>
        </div>
        <div class='card-box' style=' overflow-x:auto;overflow-y:hidden'>
          <!-- <a-carousel arrows> -->
          <!-- <a-icon type="left-circle" /> -->
          <div class='card' v-for='item in cardList' :key='item.label' @click='scrollToElement(item.label)'
               :style='{ backgroundColor: getCardBackgroundColor(item.label) }'
          >
            <h3>{{ item.num }} <span>万元</span></h3>
            <p>{{ item.label }}</p>
          </div>
          <!-- <a-icon type="right-circle" /> -->
          <!-- </a-carousel> -->
        </div>
        <div class='设备与软件'>
          <div class='module-title'>1、 设备与软件费（资本化支出）</div>
        </div>
        <div class='module-title1'>
          <p>（1）设备购置/试制费（固定资产类）<span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[0].id, 3)
            }}万元 </span>公司自筹：{{ getCategoryPrice(smallList[0].id, 4) }}万元</p>
          <a-button type='primary' @click='visible1=true;categoryId=bigList[0].id'> 拨款&年度预算分配</a-button>
        </div>
        <div class='table-box'>
          <a-table :columns='formall1' :data-source='formdataall1' bordered :pagination='false'>
            <!-- <template slot='device' slot-scope='text, record'>
              <p style='margin-right: 10px'>{{ getDeviceName(record) }}</p>
            </template> -->
            <template slot='type' slot-scope='text, record'>
              <p style='margin-right: 10px'>{{ getTypeName(record, 'form1') }}</p>
            </template>
            <template slot='action' slot-scope='text, record'>
              <a style='margin-right: 10px' @click="edit(record, 'form1')">编辑</a>
              <a-popconfirm v-if='formdataall1.length' title='是否确认删除？' @confirm="() => onDelete(record,'form1')">
                <a style='color: red' href='javascript:;'>删除</a>
              </a-popconfirm>
            </template>
          </a-table>
          <div class='btn'>
            <a type='primary' @click="addTableData('form1')"> 新增</a>
          </div>
          <a-table :columns='formall1' :showHeader='false' :data-source='formal1Table' bordered :pagination='false'>
            <!-- <template slot='device' slot-scope='text, record'>
              <p style='margin-right: 10px'>{{ getDeviceName(record) }}</p>
            </template> -->
          </a-table>
          <p>
            注：①本表仅针对可形成固定资产的设备支出项，单价≥10万元的设备购置或者试制内容需要逐项填写明细（对于科研平台建设项目酌情上调门槛额）；
          </p>

          <p>②类型*包括：购置、试制、升级改造；对于设备试制不需填列本表（6）列、（7）列；</p>

          <p>
            ③本表不得编列办公类设备费用或者主要用于生产技术活动的设备购置与试制费用；除科研平台建设项目外，其他项目(课题)原则上不得编列大型通用专业类设备的购置与试制费用；
          </p>

          <p>
            ④不能形成资产的设备相关费用（如：有的设备升级改造不能增加固定资产的）不在本表中列支，对于开展中试基地试验或现场工业试验活动发生的设备费应在（9）中特别说明；
          </p>

          <p>⑤对于实施科研采办前置的单位，课题组应根据本企业要求，在项目论证时提交其他相关材料，下同</p>
        </div>
        <div class='module-title1'>
          <p>(2)软件费与技术转让费（无形资产类）<span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[1].id, 3)
            }}万元 </span> 公司自筹：{{ getCategoryPrice(smallList[1].id, 4) }}万元</p>

          <a-button type='primary' @click='visible1=true;categoryId=smallList[1].id'> 拨款&年度预算分配</a-button>
        </div>
        <div class='table-box'>
          <a-table :columns='formall2' :data-source='formdataall2' bordered :pagination='false'>
            <template slot='type' slot-scope='text, record'>
              <p style='margin-right: 10px'>{{ getTypeName(record, 'form2') }}</p>
            </template>
            <template slot='action' slot-scope='text, record'>
              <a style='margin-right: 10px' @click="edit(record, 'form2')">编辑</a>
              <a-popconfirm v-if='formdataall2.length' title='是否确认删除？' @confirm="() => onDelete(record, 'form2')">
                <a style='color: red' href='javascript:;'>删除</a>
              </a-popconfirm>
            </template>
          </a-table>
          <div class='btn'>
            <a type='primary' @click="addTableData('form2')"> 新增</a>
          </div>
          <a-table :columns='formall2' :showHeader='false' :data-source='formdataTechTotal' bordered
                   :pagination='false'>
          </a-table>
          <p>注：①类型*包括：软件购置、软件开发、软件升级、技术转让；对于研制软件不填（4）和（5）；</p>
          <p>②本表不得含通用类办公与管理软件预算费用，除科研平台建设项目外、其他项目不得包含通用类专业软件预算费用；</p>
          <p>③对于开展中试基地试验或现场工业试验活动所发生的软件费事项应在（7）中予以特别说明；</p>
        </div>
        <div class='材料燃料动力'>
          <div class='module-title'>2、材料/燃料动力</div>
        </div>
        <div class='module-title1'>
          <p>（1）材料费 <span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[2].id, 3) }}万元 </span>
            公司自筹：{{ getCategoryPrice(smallList[2].id, 4) }}万元</p>

          <a-button type='primary' @click='visible1=true;categoryId=smallList[2].id'> 拨款&年度预算分配</a-button>
        </div>
        <div class='table-box'>
          <a-table :columns='formall3' :data-source='formdataall3' bordered :pagination='false'>
            <template slot='action' slot-scope='text, record'>
              <a style='margin-right: 10px' @click="edit(record, 'form3')">编辑</a>
              <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form3')">
                <a style='color: red' href='javascript:;'>删除</a>
              </a-popconfirm>
            </template>
          </a-table>
          <div class='btn'>
            <a type='primary' @click="addTableData('form3')"> 新增</a>
          </div>
          <a-table :columns='formall3' :showHeader='false' :data-source='formdataFuelTotal' bordered
                   :pagination='false'>
          </a-table>
          <p>注：①本表不得列支有关设备试制用的材料费预算，但应填写有关实验室试验、中试或者工业化试验的材料费支出；</p>
          <p>
            ②对于某品种材料预算合计10万元以上的大宗原辅材料、贵重材料需按项分别列示；材料可按类计，如密封圈（各种规格的密封圈）、玻璃器皿（试管、烧瓶等）；
          </p>
          <p>③不得列支主要用于试生产或生产活动的原材料、办公耗材。</p>
        </div>

        <div class='module-title1'>
          <p>（2）软件费与技术转让费（无形资产费） <span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[3].id, 3)
            }}万元 </span>公司自筹：{{ getCategoryPrice(smallList[3].id, 4) }}万元</p>

          <a-button type='primary' @click='visible1=true;categoryId=smallList[3].id'> 拨款&年度预算分配</a-button>
        </div>
        <div class='table-box'>

          <a-table :columns='formall4' :data-source='formdataall4' bordered :pagination='false'>
            <template slot='action' slot-scope='text, record'>
              <a style='margin-right: 10px' @click="edit(record, 'form4')">编辑</a>
              <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'from4')">
                <a style='color: red' href='javascript:;'>删除</a>
              </a-popconfirm>
            </template>
          </a-table>
          <div class='btn'>
            <a type='primary' @click="addTableData('form4')"> 新增</a>
          </div>
          <a-table :columns='formall4' :showHeader='false' :data-source='fuelPowerData' bordered :pagination='false'>
          </a-table>
          <p>注：①指电费、燃料费、水费、其他等消耗，对于5万元以上（含）支出项每项在表中予以列出；</p>
          <p>②用途*指实验室试验、中试试验、工业化试验。</p>
        </div>
        <div class='外协实验试验'>
          <div class='module-title'>3、外协实验/试验</div>
        </div>
        <div class='module-title1'>
          <p>（1）测试化验加工费 <span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[4].id, 3) }}万元 </span>公司自筹：{{ getCategoryPrice(smallList[4].id, 4)
            }}万元</p>
        </div>
        <div class='table-box'>
          <a-table :columns='formall5' :data-source='formdataall5' bordered :pagination='false'>
            <template slot='action' slot-scope='text, record'>
              <a style='margin-right: 10px' @click="edit(record, 'form5')">编辑</a>
              <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form5')">
                <a style='color: red' href='javascript:;'>删除</a>
              </a-popconfirm>
            </template>
          </a-table>
          <div class='btn'>
            <a type='primary' @click="addTableData('form5')"> 新增</a>
          </div>
          <a-table :columns='formall5' :showHeader='false' :data-source='assyDataTotal' bordered :pagination='false'>
          </a-table>
          <p>注：①主要针对量大及价高的外协支出项，单个服务合同总费用在10万元（含）以上的，需按项填写明细；</p>

          <p>
            ②测试化验加工服务名称包括“XXXXX化验”、“XXX产品检测”、“XXX测试”、“XXX设计”、“XXX加工”、“XXX咨询服务”、“XXX安评/环评”等等；
          </p>

          <p>③对于开展中试基地试验或现场工业试验活动所发生的软件费事项应在（2）中予以特别说明；</p>

          <p>④服务单位可包括外部法人企业支持单位，也可包括内部经济独立核算单位，服务单位尚不确定的可不填单位名称；</p>

          <p>⑤本表不得以测算化验加工费的名义列支外委研究与开发费，或者服务项目中含有技术研究与开发的内容。</p>
        </div>
        <div style='display: flex; justify-content: space-between; align-items: center;'>
          <p>（2）试验费</p>
          <div style='margin-right: auto;margin-left: 8%;'>
            <div style='display: flex; justify-content: space-between;'>
              <p>成果试验活动：</p>
              <a-input style='width:65%' v-model='tiralName' />
            </div>
          </div>
          <a-button type='primary' @click='addHeadData()'>新增</a-button>
        </div>

        <div v-for='item,index in formdataall6' :key='item.id'>
          <div v-if='item.id'>
            <div class='module-title1' style='dispaly: flex'>
              <div style='display: flex; justify-content: space-between;'>
                <p>成果试验活动{{ index + 1 }}：</p>
                <a-input disabled style='width:63%' v-if='item.name' v-model='item.name'></a-input>
              </div>

              <span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[5].id, 3) }}万元 </span><span
              style='margin-left:3%'>公司自筹：{{ getCategoryPrice(smallList[5].id, 4) }}万元</span>
              <a-button type='danger' style='margin-left: auto;margin-right: 2%;  ' @click='deleteHeadData(item.id)'> 删除
                <!-- <a-popconfirm v-if='conTiral' title='是否确认删除？' @confirm="() => deleteHeadData(item.id)">
                  <a style='color: red' href='javascript:;'>删除</a>
                </a-popconfirm> -->
              </a-button>
              <a-button type='primary' @click='visible1=true;categoryId=smallList[5].id;formal6Id=item.id'>
                拨款&年度预算分配
              </a-button>
            </div>

            <div class='table-box'>
              <!-- <div class='btn'>
                <a-button type='primary' @click="addTableData('form6')"> 新增</a-button>
              </div> -->
              <a-table :columns='formall6' :data-source='item.table' bordered :pagination='false'>
                <template slot='action' slot-scope='text, record'>
                  <a style='margin-right: 10px' @click="edit(record, 'form6')">编辑</a>
                  <a-popconfirm v-if='formdataall.length' title='是否确认删除？'
                                @confirm="() => onDelete(record,'form6')">
                    <a style='color: red' href='javascript:;'>删除</a>
                  </a-popconfirm>
                </template>
              </a-table>
              <a-table :columns='formall6' :showHeader='false' :data-source='item.totalTable' bordered
                       :pagination='false'>
              </a-table>
              <div class='btn'>
                <a type='primary' @click="addTableData('form6',item.id)"> 新增</a>
              </div>
              <p>
                注：①本表要列出试验活动直接支出的全部明细，按发生的设备购置与试制费、材料费、燃料动力费、测试化验加工费、工程作业服务费、运输与租赁费等名称列出，各费用在“备注”栏注
                明所计入的相应预算科目，其中仅有直接支付给试验工作服务方的总包或工程作业的试验服务费要计入“第二部分科技项目(课题)预算汇总表”的成果试验费预算科目；
              </p>

              <p>
                ②做成果工业化试验的费用预算必须同时符合以下几个要素方可编制：a.属于科研预算资金的专门安排，不含预期可用的生产资金和依托工程费用；b.属于非成熟技术成果的试验验证
                活动，
                不含依靠此新技术本阶段可获得甲方收入的试应用活动；c.纯属于工程化或工业化试验验证部分的费用（如开展某井局部井段的钻井成果试验，不能把整口井的钻井作业费及
                材料费都计入）。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class='外委研究费'></div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
        <p>4、外委研究费</p>
        <a-button type='primary' @click='visible1=true;categoryId=smallList[6].id'>拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <a-table :columns='formall7' :data-source='formdataall7' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form7')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form7')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <div class='btn'>
          <a type='primary' @click="addTableData('form7')"> 新增</a>
        </div>
        <a-table :columns='formall7' :showHeader='false' :data-source='outDataTotal' bordered :pagination='false'>
        </a-table>
        <p>
          注：①外委应选用科研条件好的、有优势资源的协作单位，在同等条件下尽量利用公司内部资源，预算额度可参照市场价标准或者“在科研活动成本价基础上上溢20%”的标准进行测算；
        </p>

        <p>
          ②对于所属单位实施科技采办前置的或者实施科技采办绿色通道政策的，应按其有关规定进行，在项目(课题)专家论证时提供必要材料。
        </p>
      </div>
      <div class='出版文献信息传播知识产权事务费'></div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
        <p>5、出版/文献/信息传播/知识产权事务费</p>
        <a-button type='primary' @click='visible1=true;categoryId=smallList[7].id'>拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <div class='btn'>
        </div>
        <a-table :columns='formall8' :data-source='formdataall8' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form8')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form8')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <div class='btn'>

        </div>
        <a-table :columns='formall8' :showHeader='false' :data-source='pubDataTotal' bordered :pagination='false'>
        </a-table>
        <p>注：仅针对本科目各子科目中存在单笔支出5万元以上大额预算的，要填写测算依据及说明</p>
      </div>
      <div class='会议差旅国际合作与交流'></div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
        <p>6、会议/差旅/国际合作与交流</p>
      </div>
      <div class='module-title1'>
        <p>(1) 科目预算费用组成 <span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[8].id, 3) }}万元 </span>
          公司自筹：{{ getCategoryPrice(smallList[8].id, 4) }}万元</p>

        <a-button type='primary' @click='visible1=true;categoryId=smallList[8].id'> 拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <!-- <div class='btn'>
          <a-button type='primary' @click="addTableData('form9')"> 新增</a-button>
        </div> -->
        <a-table :columns='formall9' :data-source='formdataall9' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form9')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form9')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <a-table :columns='formall9' :showHeader='false' :data-source='exDataTotal' bordered :pagination='false'>
        </a-table>
      </div>
      <div class='module-title1'>
        <p>(2)国际合作及交流费 <span v-if='showHaiYou'>海发拨款：{{ getCategoryPrice(smallList[9].id, 3) }}万元 </span>公司自筹：{{ getCategoryPrice(smallList[9].id, 4)
          }}万元</p>

        <a-button type='primary' @click='visible1=true;categoryId=smallList[9].id'> 拨款&年度预算分配</a-button>
      </div>
      <div class='table-box'>
        <a-table :columns='formall10' :data-source='formdataall10' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form10')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form10')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <div class='btn'>
          <a type='primary' @click="addTableData('form10')"> 新增</a>
        </div>
        <a-table :columns='formall10' :showHeader='false' :data-source='conDataTotal' bordered :pagination='false'>
        </a-table>
        <p>注：交流类型包括：出国考察/交流、出国培训、出国参加国际会议、外国专家来华交流等。</p>
      </div>
      <div class='专家咨询评审劳务'></div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
        <p>7、专家咨询评审/劳务</p>
      </div>

      <div class='table-box'>
        <a-table :columns='formall11' :data-source='formdataall11' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form11')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form11')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <a-table :columns='formall11' :showHeader='false' :data-source='luDataTotal' bordered :pagination='false'>
        </a-table>
        <p>注：①专家咨询与评审费应按照公司专家费标准执行；</p>
        <p>
          ②劳务费预算中若有编列访问学者及外部研究人员劳务费用时，应对其承担研究任务的必要性、投入工作时间的合理性以及费用标准予以说明。
        </p>
      </div>
      <div class='其他费用'></div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
        <p>8、其他费用</p>
        <!-- <div class='btn'>
          <a-button type='primary' @click='visible1=true;categoryId=smallList[11].id'>拨款&年度预算分配</a-button>
        </div> -->
      </div>
      <div class='table-box'>
        <!-- <div class='btn'>
          <a-button type='primary' @click="addTableData('form12')"> 新增</a-button>
        </div> -->
        <a-table :columns='formall12' :data-source='formdataall12' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form12')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form12')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <a-table :columns='formall12' :showHeader='false' :data-source='otherDataTotal' bordered :pagination='false'>
        </a-table>
        <p>注：①税费：指公司拨款缴纳的增值税额，要据实填写；</p>
        <p>②除税费外，当其他子科目预算合计额若超规定的项目(课题)总预算额的3%时，须在表格中提供测算依据说明；</p>
        <p>③科研课题的租赁维修费科目预算中不得列支或分摊实验室基础设施的租赁/维修与装修费或自有仪器租赁或使用费 ；</p>
        <p>④本科目不得编列不可预见费、招待费、通讯费、人工成本、房租物业费及设备折旧费等预算。</p>
      </div>
      <div class='间接经费配套'></div>
      <div class='module-title' style='border-bottom: 1px solid #e3e3e3'>
        <p>9、间接经费配套</p>
        <div class='btn'>
          <a-button type='primary' @click='visible1=true;categoryId=smallList[12].id'>拨款&年度预算分配</a-button>

        </div>
      </div>
      <div class='table-box'>
        <a-table :columns='formall13' :data-source='formdataall13' bordered :pagination='false'>
          <template slot='action' slot-scope='text, record'>
            <a style='margin-right: 10px' @click="edit(record, 'form13')">编辑</a>
            <a-popconfirm v-if='formdataall.length' title='是否确认删除？' @confirm="() => onDelete(record,'form13')">
              <a style='color: red' href='javascript:;'>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
        <div class='btn'>
          <a type='primary' @click="addTableData('form13')"> 新增</a>
        </div>
        <a-table :columns='formall13' :showHeader='false' :data-source='indirectDataTotal' bordered :pagination='false'>
        </a-table>
      </div>
      <div class='btn' style='padding-bottom: 150px;'>
        <a-button @click='previous'> 上一步</a-button>
        <a-button type='primary' @click='nextTab()'> 下一步</a-button>
      </div>
      <a-modal v-model='visible' title='新增' @ok='handleOk' width='80%'>
        <a-form :label-col='{ span: 8 }' :wrapper-col='{ span: 12 }'>
          <a-form-item
            v-decorator="[ {
          rules: [
              { required: true, message: '' },
              { validator: createValidator(item) }
          ]
      }]"
            :label='item.title' v-for='(item, index) in dia' :key='index'>
            <a-select
              v-model='item.value'
              placeholder='请选择'
              v-if="item.title ==='类型'"
            >
              <template v-if="type == 'form1'">
                <a-select-option :value='1'>购置</a-select-option>
                <a-select-option :value='2'>试制</a-select-option>
              </template>
              <template v-else-if="type == 'form2'">
                <a-select-option :value='1'>软件购置</a-select-option>
                <a-select-option :value='2'>软件开发</a-select-option>
                <a-select-option :value='3'>软件升级</a-select-option>
                <a-select-option :value='4'>技术转让</a-select-option>
              </template>
              <template v-else>
                <a-select-option :value='1'> 设备与软件费</a-select-option>
                <a-select-option :value='2'> 材料/燃料动力费</a-select-option>
                <a-select-option :value='3'> 外协实验/试验费</a-select-option>
                <a-select-option :value='4'> 外委研究费</a-select-option>
                <a-select-option :value='5'> 出版/文献/信息传播/知识产权事务费</a-select-option>
                <a-select-option :value='6'> 会议/差旅/国际合作与交流费</a-select-option>
                <a-select-option :value='7'> 专家咨询评审/劳务费</a-select-option>
                <a-select-option :value='8'> 其他费用</a-select-option>
                <a-select-option :value='9'> 间接经费配套</a-select-option>
              </template>
            </a-select>
            <a-input v-else-if="item.title!=='操作'" v-model='item.value'
            />
          </a-form-item>
        </a-form>
      </a-modal>
      <a-modal v-model='editVisible' title='编辑' @ok='handleUpdate' @cancel='handleCancel' width='80%'>
        <a-form :label-col='{ span: 8 }' :wrapper-col='{ span: 12 }'>
          <a-form-item :label='item.title' v-for='(item, index) in dia' :key="'update'+index">
            <a-select
              v-model='updateItem.deviceName'
              placeholder='请选择'
              v-if="item.title ==='设备名称'"
            >
              <a-select-option :value='0'> 设备购置费</a-select-option>
              <a-select-option :value='1'> 软件费与技术转让费</a-select-option>
              <a-select-option :value='2'> 设备试制费</a-select-option>
              <a-select-option :value='3'> 材料费</a-select-option>
              <a-select-option :value='4'> 燃料动力费</a-select-option>
              <a-select-option :value='5'> 测试化验加工费</a-select-option>
              <a-select-option :value='6'> 试验费</a-select-option>
              <a-select-option :value='7'> 外委研究费</a-select-option>
              <a-select-option :value='8'> 印刷出版费</a-select-option>
              <a-select-option :value='9'> 文献资料费</a-select-option>
              <a-select-option :value='10'> 专业通信费</a-select-option>
              <a-select-option :value='11'> 知识产权费</a-select-option>
              <a-select-option :value='12'> 会议费</a-select-option>
              <a-select-option :value='13'> 差旅费</a-select-option>
              <a-select-option :value='14'> 国际合作与交流费</a-select-option>
              <a-select-option :value='15'> 专家咨询评审费</a-select-option>
              <a-select-option :value='16'> 劳务费</a-select-option>
              <a-select-option :value='17'> 运输费</a-select-option>
              <a-select-option :value='18'> 租赁/维修费</a-select-option>
              <a-select-option :value='19'> 培训费</a-select-option>
              <a-select-option :value='20'> 办公费</a-select-option>
              <a-select-option :value='21'> 税费</a-select-option>
              <a-select-option :value='22'> 其他支出</a-select-option>
              <a-select-option :value='23'> 标准项目</a-select-option>
              <a-select-option :value='24'> 英才计划项目</a-select-option>
              <a-select-option :value='25'> 人工成本</a-select-option>
              <a-select-option :value='26'> 折旧费</a-select-option>
            </a-select>
            <a-select
              v-model='updateItem.type'
              placeholder='请选择'
              v-else-if="item.title ==='类型'"
            >
              <a-select-option :value='1'> 设备与软件费</a-select-option>
              <a-select-option :value='2'> 材料/燃料动力费</a-select-option>
              <a-select-option :value='3'> 外协实验/试验费</a-select-option>
              <a-select-option :value='4'> 外委研究费</a-select-option>
              <a-select-option :value='5'> 出版/文献/信息传播/知识产权事务费</a-select-option>
              <a-select-option :value='6'> 会议/差旅/国际合作与交流费</a-select-option>
              <a-select-option :value='7'> 专家咨询评审/劳务费</a-select-option>
              <a-select-option :value='8'> 其他费用</a-select-option>
              <a-select-option :value='9'> 间接经费配套</a-select-option>
            </a-select>
            <a-input v-else-if="item.title!=='操作'"
                     v-decorator="[ {
            rules: [
                { required: true, message: '' },
                { validator: createValidator(item) }
            ]
        }]"
                     v-model='updateItem[item.dataIndex]'></a-input>
          </a-form-item>
          <p>
          </p>
        </a-form>
      </a-modal>
      <a-modal v-model='visible1' title='年度预算' @ok='submitOk()' width='80%'>
        <a-table :columns='alertColumns' :data-source='alertTable' bordered :pagination='false'>
          <template v-for='(items,indexes) in alertColumns' :slot='items.dataIndex' slot-scope='text, record'>
            <div :key='indexes'>
              <EditableCell v-if='record.key!=alertTable[2].key' :text='text? String(text) : " "'
                            @change='onCellChange(record.key, items.dataIndex, $event)' />
              <span v-else>{{ text || '' }}</span>
            </div>
          </template>
        </a-table>
      </a-modal>
    </div>
  </div>
</template>

<script>
import EditableCell from './EditableCell.vue'
import data from './fakeData.js'
import jsPDF from 'jspdf'
import html2pdf from 'html2pdf.js'

import {
  totalSmallAmount,
  updateIndirct,
  indirctList,
  addIndirct,
  deleteIndirct,
  getAllPrice,
  detail,
  getCategory,
  getBigCategory,
  getSmallCategory,
  getDeviceTable,
  deleteDevice,
  addDevice,
  softDeviceTable,
  deleteSoftDevice,
  addSoftDevice,
  metralList,
  deleteMetral,
  addmetral,
  fuelList,
  addFuel,
  deleteFuel,
  assayList,
  addAssay,
  deleteAssay,
  addTrial,
  trialList,
  deleteTrial,
  outList,
  deleteOut,
  addOut
  ,
  pubList,
  addPub,
  deletePub,
  exList,
  addEx,
  deleteEx,
  addCon,
  deleteCon,
  conList,
  addLu,
  deleteLu,
  luList,
  otherList,
  deleteOther,
  addOther,
  getPrice,
  saveBuget,
  addHeadTrial,
  deleteHeadTrial,
  findAllHeadTrial,
  findByIdHeadTrial,
  modifyHeadTrial
} from '@/api/projectInitApply'

import {
  updateDevice,
  updateSoftDevice,
  updateMetral,
  updateFuel,
  updateAssay,
  updateTrial,
  updateOut,
  updateCon,
  updateEx,
  updateLu,
  updateOther,
  updatePub
} from '@/api/updateBudget'
import { getTotalList, getCategoryList, total, getByType } from '@/utils/dictionary'
import { message } from 'ant-design-vue'

const commColumn = [
  {
    title: '项目（课题）经费',
    dataIndex: 'name',
    value: 0
  },
  {
    title: '预算总额',
    dataIndex: 'type',
    value: 0
  }
]
const memo = {
  title: '备注',
  dataIndex: 'action',
  scopedSlots: { customRender: 'action' },

  value: ''
}
export default {
  props: {
    id: {
      // type: number,
      // default: '1742369449645895682'
      default: null
    }
  },
  components: {
    EditableCell
  },
  data() {
    return {
      totalCategory: getTotalList(),
      tiralName: '',
      formal6Id: 0,
      visible: false,
      visible1: false,
      updateItem: {},
      editVisible: false,
      categoryName: null,
      conTiral: false,
      categoryId: '',
      activi: '',
      dia: [],
      bigList: [],
      smallList: [],
      formdataall2: [],
      formdataall3: [],
      formdataall4: [],
      formdataall5: [],
      formdataall6: [{
        table: [],
        name: '',
        id: '',
        totalTable: []
      }],
      formdataall7: [],
      formdataall8: [],
      formdataall9: [],
      formdataall10: [],
      formdataall11: [],
      formdataall12: [],
      formdataall13: [],
      alertTable: [],
      formall2: data.formall2,
      formall3: data.formall3,
      formall4: data.formall4,
      formall5: data.formall5,
      formall6: data.formall6,
      formall7: data.formall7,
      formall8: data.formall8,
      formall9: data.formall9,
      formall10: data.formall10,
      formall11: data.formall11,
      formall12: data.formall12,
      formall13: data.formall13,
      typeNameMap: data.typeNameMap,
      projectData: {},
      showHaiYou: false,
      alertColumns: [],
      allPriceForm: [],
      cardList: [],
      formdataall: [
        {
          key: '100987',
          name: '海油发展拨款',
          type: '00.00'
        },
        {
          key: '223314',
          name: '所属单位直接经费配套',
          type: '00.00'
        },
        {
          key: '33213',
          name: '所属单位间接经费配套',
          type: 0
        },
        {
          key: '33253',
          name: '合计',
          type: 0
        }
      ],
      formall: [
        {
          title: '项目(课题)经费',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '预算总额',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '备注',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      formdataall1: [],
      formPriceAll: [],
      formall1: [
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          width: 200,
          value: '',
          scopedSlots: { customRender: 'device' }
        },
        {
          title: '类型',
          dataIndex: 'type',
          value: '',
          width: 100,
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '单价（万元/一台）',
          dataIndex: 'price',
          width: 150,
          value: ''
        },
        {
          title: '数量（台套）',
          dataIndex: 'quantity',
          width: 100,
          value: ''
        },
        {
          title: '预算额（万元）',
          dataIndex: 'amount',
          width: 150,
          value: ''
        },
        {
          title: '型号/规格',
          dataIndex: 'spec',
          width: 100,
          value: ''
        },
        {
          title: '制造商/国别',
          dataIndex: 'manufacturer',
          width: 100,
          value: ''

        },
        {
          title: '主要技术性能指标',
          dataIndex: 'mainTechnical',
          width: 200
        },
        {
          title: '其他说明（与课题研究任务的关系）',
          dataIndex: 'otherNotes',
          width: 200,
          value: ''
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 110,
          value: ''
        }
      ],

      formal1Table: [],
      type: '',
      allSmallAmountList: [],
      formdataTechTotal: [],
      formdataFuelTotal: [],
      fuelPowerData: [],
      assyDataTotal: [],
      outDataTotal: [],
      pubDataTotal: [],
      exDataTotal: [],
      conDataTotal: [],
      luDataTotal: [],
      otherDataTotal: [],
      indirectDataTotal: [],
      lastClickedLabel: null
    }
  },
  watch: {
    visible1(val) {
      this.alertColumns = []
      if (val) {
        this.alertTable = data.formdataall14
        this.alertColumns = commColumn
        // 一个是column 一个是formData
        // 先动态扩展cloumn的列
        console.log(this.alertColumns)
        let params = {
          categoryId: this.categoryId,
          mainId: this.id
        }
        if (this.categoryId == 6) {
          params.trialHeadId = this.formal6Id
        }
        getCategory(params).then(res => {
          let data = res.data
          let years = data[0].years
          let list = years.map(year => {
            return {
              title: year + '年',
              dataIndex: year.toString(),
              value: '',
              scopedSlots: { customRender: year.toString() }
            }
          })
          this.alertColumns = [...this.alertColumns, ...list]
          years.forEach(ele => {
            this.alertTable.forEach(ele2 => {
              ele2[ele] = '0'
            })
          })
          // 动态列添加完毕
          this.alertColumns.push(memo)
          // 初始化所属单位直接经费配套
          // 动态计算数据
          if (data[0].list.length > 0) {
            let haiyou = data[0].list[0]
            let direct = data[0].list[1]
            this.alertTable[0].type = haiyou.amount
            this.alertTable[1].type = direct.amount
            this.alertTable[2].type = haiyou.amount + direct.amount
            let map = new Map()
            if (haiyou.bodyList && haiyou.bodyList.length > 0) {
              let total = 0
              haiyou.bodyList.forEach(ele => {
                total += ele.money
                map.set(ele.year, total)
              })
              data[0].years.forEach(year => {
                this.alertTable[0][year] = map.get(year)
              })
            }
            if (direct.bodyList && direct.bodyList.length > 0) {
              let total = 0
              direct.bodyList.forEach(ele => {
                total += ele.money
                map.set(ele.year, total)
              })
              data[0].years.forEach(year => {
                this.alertTable[1][year] = map.get(year)
              })
            }
            data[0].years.forEach(year => {
              this.alertTable[2][year] = this.alertTable[0][year] + this.alertTable[1][year]
            })
            // 没有数据就清空
          } else {
            this.alertTable.forEach(ele => {
              ele.type = '0'
            })
            data[0].years.forEach(year => {
              this.alertTable.forEach(ele => {
                ele[year] = '0'
              })
            })
          }

        })
        console.log(this.alertTable)
      }
    }
  },
  mounted() {
    // this.totalCategory =  getTotalList()
    this.detail()
    this.getBigCategory()
    this.getSmallCategory()
    this.getDeviceTable()
    this.softDeviceTable()
    this.assayList()
    this.fuelList()
    this.metralList()
    this.outList()
    this.trialList()
    this.pubList()
    this.exList()
    this.conList()
    this.luList()
    this.otherList()
    this.getPrice()
    this.getAllPrice()
    this.indirctList()
    this.totalSmallAmount()
    this.findAllHeadTrial()
    // this.getCategoryTotal()
  },
  created() {
    this.getPrice()
    this.getAllPrice()
    this.totalCategory = getTotalList()
  },
  methods: {
    exportToPDF() {
      // Create jsPDF instance
      const pdf = new jsPDF()

      // Get the content element
      const contentElement = document.querySelector('.maintain1');
      // const contentElement = document.getElementById('.maintain1')
      console.log(contentElement)
      // Convert content to PDF
      const options = {
        margin: 10,
        filename: '科技预算书.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
      }

      const target = html2pdf().set(options).from(contentElement)
      target.save()
      // target.outputPdf(pdf => {
      //   console.log(pdf)
      //   const blob = new Blob([pdf.output('blob')], { type: 'application/pdf' })
      //   const url = URL.createObjectURL(blob)
      //   const a = document.createElement('a')
      //   a.href = url
      //   a.download = options.filename
      //   document.body.appendChild(a)
      //   a.click()
      //   document.body.removeChild(a)
      // })
    },
    async deleteHeadData(id) {
      await this.deleteHeadTrial(id)
      await this.findAllHeadTrial()

    },
    async addHeadData() {
      let res = await this.addHeadTrial()
      await this.findAllHeadTrial()
      let id = res.data
      let modify = this.formdataall6.filter(ele => ele.id == id)[0]
      if (this.tiralName) {
        modify.name = this.tiralName
        await this.modifyHeadTrial(modify)
      }
      this.tiralName = ''
    },
    async addHeadTrial() {
      let res = await addHeadTrial({ mainId: this.id })
      return res
    },
    async deleteHeadTrial(id) {
      return await deleteHeadTrial({ id: id })
    },
    async findAllHeadTrial() {
      let res = await findAllHeadTrial({ mainId: this.id })
      this.formdataall6 = res.data.map(ele => {
        return {
          table: ele.bodyList,
          id: ele.id,
          name: ele.name,
          totalTable: ele.totalList.map(t => {
            return {
              costConstitute: t.title,
              amount: t.amount
            }
          })
        }
      })
    },
    async findByIdHeadTrial(id) {
      return findByIdHeadTrial({ id: id })
    },
    async modifyHeadTrial(data) {
      return modifyHeadTrial(data)
    },
    getCardBackgroundColor(label) {
      return this.lastClickedLabel === label ? 'lightblue' : '' // 设置蓝色或空字符串
    },
    scrollToElement(className) {
      this.lastClickedLabel = className
      const cleanedClassName = className.replaceAll('/', '')
      console.log(cleanedClassName)
      const elements = document.querySelectorAll(`.${cleanedClassName}`)
      if (elements.length > 0) {
        // 获取第一个符合条件的元素
        const targetElement = elements[0]

        // 计算目标滚动位置（使目标元素位于屏幕中央）
        const screenHeight = window.innerHeight || document.documentElement.clientHeight
        const targetPosition = targetElement.offsetTop - (screenHeight / 2)

        // 滚动到目标位置
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth' // 平滑滚动
        })
      }
    },
    totalSmallAmount() {
      totalSmallAmount({ mainId: this.id }).then(res => {
        this.allSmallAmountList = res.data.amountInfo
      })
    },
    getCategoryPrice(categoryId, type) {
      let amount = 0
      if (this.allSmallAmountList && this.allSmallAmountList.length > 0) {
        this.allSmallAmountList.forEach(ele => {
          if (ele.smallCategoryId == categoryId && ele.payerId == type) {
            amount = ele.amount
          }
        })
      }


      return amount
    },
    getAllPrice() {
      getAllPrice({
        mainId: this.id
      }).then(res => {
        // 创建新的 allPriceForm 和 formPriceAll
        this.allPriceForm = commColumn
        this.formPriceAll = []
        this.formPriceAll = data.formdataall15
        console.log('res', res.data)
        if (res.data.length > 0) {
          let data = res.data
          let list = data[0].years.map(year => {
            return {
              title: year + '年',
              dataIndex: year.toString(),
              value: '',
              scopedSlots: { customRender: year.toString() }
            }
          })
          data[0].years.forEach(year => {
            this.formPriceAll.forEach(ele => {
              ele[year] = 0
            })
          })
          this.allPriceForm = [...this.allPriceForm, ...list]
          let haiyou = data[0].list[0]
          let direct = data[0].list[1]
          let indirect = data[0].list[2]
          this.formPriceAll[0].type = haiyou.amount
          this.formPriceAll[1].type = direct.amount
          this.formPriceAll[2].type = indirect.amount
          let totalMoneyMap = new Map()
          if (haiyou.bodyList && haiyou.bodyList.length > 0) {
            let total = 0
            haiyou.bodyList.forEach(ele => {
              console.log(this.formPriceAll[0])
              this.formPriceAll[0][ele.year] += ele.money
              total += ele.money
              totalMoneyMap.set(ele.year, total)
              console.log(ele, totalMoneyMap)
            })
            data[0].years.forEach(year => {
              this.formPriceAll[3][year] += totalMoneyMap.get(year)
            })
          }
          if (direct.bodyList && direct.bodyList.length > 0) {
            let total = 0
            direct.bodyList.forEach(ele => {
              this.formPriceAll[1][ele.year] += ele.money
              total += ele.money
              totalMoneyMap.set(ele.year, total)
            })
            data[0].years.forEach(year => {
              this.formPriceAll[3][year] += totalMoneyMap.get(year)
            })
          }
          if (indirect.bodyList && indirect.bodyList.length > 0) {
            let total = 0
            indirect.bodyList.forEach(ele => {
              this.formPriceAll[2][ele.year] += ele.money
              total += ele.money
              totalMoneyMap.set(ele.year, total)
            })
            data[0].years.forEach(year => {
              this.formPriceAll[3][year] += totalMoneyMap.get(year)
            })
          }
          totalSmallAmount({ mainId: this.id }).then(res => {
            this.formPriceAll[3].type = res.data.amountInfo.reduce((total, ele) => {
              return total += ele.amount
            }, 0)
          })
        }

      })
    },
    detail() {
      detail({ id: this.id }).then(res => {
        res.data.cycleTime = res.data.cycleStart + '~' + res.data.cycleEnd
        this.projectData = res.data
        if (res.data.projectSource === 2 || res.data.projectSource === 3 || res.data.projectSource === 4) {
          this.showHaiYou = true
        } else {
          this.showHaiYou = false
        }
      })
    },
    createValidator(item) {
      return (rule, value, callback) => {
        const fieldsToValidate = ['单价', '数量', '预算额', '计量单位']

        if (fieldsToValidate.some(field => item.title.includes(field))) {
          if (isNaN(value)) {
            callback('请输入一个有效的数字')
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
    },
    edit(record, type) {
      this.editVisible = true
      this.updateItem = record
      // this.updateItem.deviceName = this.deviceNameMap[record.deviceName]
      this.updateItem.typeName = this.typeNameMap[record.type]
      this.type = type
      if (type == 'form1') {
        this.dia = [...this.formall1]
      } else if (type == 'form2') {
        this.dia = [...this.formall2]
      } else if (type == 'form3') {
        this.dia = [...this.formall3]
      } else if (type == 'form4') {
        this.dia = [...this.formall4]
      } else if (type == 'form5') {
        this.dia = [...this.formall5]
      } else if (type == 'form6') {
        this.dia = [...this.formall6]
      } else if (type == 'form7') {
        this.dia = [...this.formall7]
      } else if (type == 'form8') {
        this.dia = [...this.formall8]
      } else if (type == 'form9') {
        this.dia = [...this.formall9]
      } else if (type == 'form10') {
        this.dia = [...this.formall10]
      } else if (type == 'form11') {
        this.dia = [...this.formall11]
      } else if (type == 'form12') {
        this.dia = [...this.formall12]
      } else if (type == 'form13') {
        this.dia = [...this.formall13]
      }

    },
    getTypeName(record, formName) {
      if (!formName) {
        return this.typeNameMap[record.type]
      }
      if (formName == 'form1') {
        return data.typeForm1Map[record.type]
      }
      if (formName == 'form2') {
        return data.typeForm2Map[record.type]
      }
    },
    submitOk() {
      let list = []
      console.log('submit', this.alertTable)
      this.alertTable.forEach((e, index) => {
        let objList = []
        if (index < this.alertTable.length - 1) {
          for (let i in e) {
            if (i != 'name' && i != 'type' && i != 'action' && i != 'key' && i) {
              objList.push({
                // 'headId': Number(this.categoryId),
                'money': Number(e[i]),
                'year': Number(i)
              })
            }
          }
          let playerId
          if (e.name === '海油发展拨款') {
            playerId = 3
          } else if (e.name === '所属单位直接经费配套') {
            playerId = 4
          } else if (e.name === '所属单位间接经费配套	') {
            playerId = 5
          }
          console.log('e', e)
          let obj = {
            'amount': Number(e.type),
            'bodyList': objList,
            'mainId': this.id,
            'memo': e.action,
            'payerId': playerId,
            'smallCategoryId': Number(this.categoryId)
            // 'payerId': 0
          }
          if (this.categoryId == 6) {
            obj.trialHeadId = this.formal6Id
          }
          list.push(obj)
        }
      })
      saveBuget({ 'list': list }).then(res => {
        this.getAllPrice()
        this.visible1 = false
        this.getPrice()
        this.totalSmallAmount()
        // this.getCategoryTotal()
      }).catch(error => {
        this.$message.error(error.msg)
      })

    },
    nextTab(isTriggerExternal) {
      if (isTriggerExternal) {
        this.$router.push({ path: '/initManage' })
      } else this.$emit('next', 3)
    },
    previous() {
      this.$emit('previous', 1)
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.alertTable]
      const target = dataSource.find(item => item.key === key)
      if (target) {
        target[dataIndex] = Number(value)

        for (let i in target) {
          if (i != 'name' && i != 'type' && i != 'action' && i != 'key') {
            target.type = Number(target.type)
            console.log(target)
            target.type += Number(target[i])
            if (target[i] == 0) {
              target.type = target[i]
            }
          }
        }
        for (let i in dataSource[dataSource.length - 1]) {
          if ((i != 'name' && i != 'action' && i != 'key')) {
            dataSource[dataSource.length - 1][i] = 0
            dataSource.forEach((e, index) => {
              if (index < dataSource.length - 1) {

                if (e[i] !== undefined && e[i] != 0) {
                  dataSource[dataSource.length - 1][i] += Number(e[i])
                  console.log(dataSource[dataSource.length - 1], e, i)

                }
                //   if(e[i]==0){
                //     dataSource[dataSource.length - 1][i] = Number(e[i])
                //  }

              }
            })

          }


        }
        // dataSource.forEach(ele=>{
        //   if(ele.key=='135987'){
        //     ele.
        //   }
        // })
        this.alertTable = dataSource
        console.log(dataSource)
      }
    },
    getPrice() {
      getPrice({
        projectApplicationId: this.id
      }).then(res => {
        this.cardList = res.data.map((ele) => {
          return {
            num: ele.amount,
            label: ele.categoryName
          }
        })
      })
    },
    getBigCategory() {
      getBigCategory().then(res => {
        this.bigList = res.data
      })
    },

    getDeviceTable() {
      getDeviceTable({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall1 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            deviceName: ele.title,
            amount: ele.amount
          }
        })
        this.formal1Table = list
      })
    },
    softDeviceTable() {
      softDeviceTable({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall2 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            technologyName: ele.title,
            amount: ele.amount
          }
        })
        this.formdataTechTotal = list
      })
    },
    indirctList() {
      indirctList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall13 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            subjectName: ele.title,
            amount: ele.amount
          }
        })
        this.indirectDataTotal = list
      })
    },
    fuelList() {
      fuelList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall4 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            fuelPowerExpenditureName: ele.title,
            amount: ele.amount
          }
        })
        this.fuelPowerData = list

      })
    },
    assayList() {
      assayList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall5 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            testAssayProcessinName: ele.title,
            amount: ele.amount
          }
        })
        this.assyDataTotal = list
      })
    },
    trialList() {
      trialList({
        projectApplicationId: this.id
      }).then(res => {
        // this.formdataall6 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            materialName: ele.title,
            amount: ele.amount
          }
        })

        // this.formdataFuelTotal =list
      })
    },
    outList() {
      outList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall7 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            researchTaskName: ele.title,
            amount: ele.amount
          }
        })
        this.outDataTotal = list
      })
    },
    async pubList() {
      let res = await pubList({
        projectApplicationId: this.id
      })
      let list = res.data.totalList.map(ele => {
        return {
          deviceName: ele.title,
          amount: ele.amount
        }
      })
      this.pubDataTotal = list
      console.log(res.data)
      // this.formdataall8 = res.data.dataList
      console.log('formdataall8', this.formdataall8)
      let id = this.smallList[7].id
      let cateList = await this.getCateList(id)
      this.formdataall8 = cateList.map(ele => {
        return {
          amount: 0,
          createdBy: '',
          createdTime: '',
          deviceName: ele.dictName,
          mainId: this.id
        }
      })
      if (res.data.dataList && res.data.dataList.length > 0) {
        this.formdataall8.forEach(ele => {
          res.data.dataList.forEach((item, index) => {
            let deviceName = ele.deviceName
            if (deviceName == item.deviceName) {
              ele.amount = item.amount
              ele.illustrate = item.illustrate
              ele.id = item.id
            }

          })
        })

      } else {
        // let list = []
      }


    },
    async exList() {
      let res = await exList({
        projectApplicationId: this.id
      })
      let list = res.data.totalList.map(ele => {
        return {
          subjectName: ele.title,
          amount: ele.amount
        }
      })
      this.exDataTotal = list
      this.formdataall9 = res.data.dataList
      let id = this.smallList[8].id
      let cateList = await this.getCateList(id)
      this.formdataall9 = cateList.map(ele => {
        return {
          amount: 0,
          createdBy: '',
          createdTime: '',
          subjectName: ele.dictName,
          mainId: this.id
        }
      })
      if (res.data.dataList && res.data.dataList.length > 0) {
        console.log(res.data.dataList)
        this.formdataall9.forEach(ele => {
          res.data.dataList.forEach((item, index) => {
            let subjectName = ele.subjectName
            if (subjectName == item.subjectName) {
              ele.amount = item.amount
              ele.illustrate = item.illustrate
              ele.id = item.id
            }
          })
        })

      }

    },
    conList() {
      conList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall10 = res.data.dataList
        let list = res.data.totalList.map(ele => {
          return {
            exchangeName: ele.title,
            amount: ele.amount
          }
        })
        this.conDataTotal = list
      })
    },
    async luList() {
      let res = await luList({
        projectApplicationId: this.id
      })
      let list = res.data.totalList.map(ele => {
        return {
          subjectName: ele.title,
          amount: ele.amount
        }
      })
      this.luDataTotal = list
      this.formdataall11 = res.data.dataList
      let id = this.smallList[10].id
      let cateList = await this.getCateList(id)
      console.log(cateList)
      this.formdataall11 = cateList.map(ele => {
        return {
          amount: 0,
          createdBy: '',
          createdTime: '',
          subjectName: ele.dictName,
          mainId: this.id
        }
      })
      if (res.data.dataList && res.data.dataList.length > 0) {
        this.formdataall11.forEach(ele => {
          res.data.dataList.forEach((item, index) => {
            let subjectName = ele.subjectName
            if (subjectName == item.subjectName) {
              ele.amount = item.amount
              ele.illustrate = item.illustrate
              ele.id = item.id
            }

          })
        })

      }
    },
    async otherList() {
      let res = await otherList({
        projectApplicationId: this.id
      })
      let list = res.data.totalList.map(ele => {
        return {
          subjectName: ele.title,
          amount: ele.amount
        }
      })
      this.otherDataTotal = list
      this.formdataall12 = res.data.dataList
      let id = this.smallList[11].id
      let cateList = await this.getCateList(id)
      this.formdataall12 = cateList.map(ele => {
        return {
          amount: 0,
          createdBy: '',
          createdTime: '',
          subjectName: ele.dictName,
          mainId: this.id
        }
      })
      console.log(cateList)
      if (res.data.dataList && res.data.dataList.length > 0) {
        this.formdataall12.forEach(ele => {
          res.data.dataList.forEach((item, index) => {
            let subjectName = ele.subjectName
            if (subjectName == item.subjectName) {
              console.log(ele, subjectName)
              ele.amount = item.amount
              ele.illustrate = item.illustrate
              ele.id = item.id
            }


          })
        })
        console.log(this.formdataall12)

      }

    },
    metralList() {
      metralList({
        projectApplicationId: this.id
      }).then(res => {
        this.formdataall3 = res.data.dataList
        console.log(this.formdataall3)
        let list = res.data.totalList.map(ele => {
          return {
            materialName: ele.title,
            amount: ele.amount
          }
        })
        this.formdataFuelTotal = list
      })
    },
    getSmallCategory() {
      getSmallCategory().then(res => {
        this.smallList = res.data
      })
    },
    onDelete(record, type) {
      if (type == 'form1') {
        const dataSource = [...this.formdataall1]
        deleteDevice({ id: record.id }).then(res => {
          if (res) {
            this.getDeviceTable()
            this.totalSmallAmount()
          }
        })
        // this.formdataall1 = dataSource.filter((item) => item.key !== key)
      } else if (type == 'form2') {
        deleteSoftDevice({ id: record.id }).then(res => {
          if (res) {
            this.softDeviceTable()
            this.totalSmallAmount()
          }
        })
        const dataSource = [...this.formdataall2]
        this.formdataall2 = dataSource.filter((item) => item.key !== key)
      } else if (type == 'form3') {
        deleteMetral({ id: record.id }).then(res => {
          if (res) {
            this.metralList()
            this.totalSmallAmount()
          }
        })
        // const dataSource = [...this.formdataall3]
        // this.formdataall3 = dataSource.filter((item) => item.key !== key)
      } else if (type == 'form4') {
        deleteFuel({ id: record.id }).then(res => {
          if (res) {
            this.fuelList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form5') {
        deleteAssay({ id: record.id }).then(res => {
          if (res) {
            this.assayList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form6') {
        deleteTrial({ id: record.id }).then(res => {
          if (res) {
            this.trialList()
            this.totalSmallAmount()
            this.findAllHeadTrial()
          }
        })
      } else if (type == 'form7') {
        deleteOut({ id: record.id }).then(res => {
          if (res) {
            this.outList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form8') {
        deletePub({ id: record.id }).then(res => {
          if (res) {
            this.pubList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form9') {
        deleteEx({ id: record.id }).then(res => {
          if (res) {
            this.exList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form10') {
        deleteCon({ id: record.id }).then(res => {
          if (res) {
            this.conList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form11') {
        deleteLu({ id: record.id }).then(res => {
          if (res) {
            this.luList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form12') {
        deleteOther({ id: record.id }).then(res => {
          if (res) {
            this.otherList()
            this.totalSmallAmount()
          }
        })
      } else if (type == 'form13') {
        deleteIndirct({ id: record.id }).then(res => {
          if (res) {
            this.indirctList()
            this.totalSmallAmount()
          }
        })
      }
    },
    addTableData(type, id) {
      this.visible = true
      this.type = type
      this.dia = []
      console.log(this.dia)
      if (type == 'form1') {
        this.dia = [...this.formall1]
      } else if (type == 'form2') {
        this.dia = [...this.formall2]
      } else if (type == 'form3') {
        this.dia = [...this.formall3]
      } else if (type == 'form4') {
        this.dia = [...this.formall4]
      } else if (type == 'form5') {
        this.dia = [...this.formall5]
      } else if (type == 'form6') {
        this.formal6Id = id
        this.dia = [...this.formall6]
      } else if (type == 'form7') {
        this.dia = [...this.formall7]
      } else if (type == 'form8') {
        this.dia = [...this.formall8]
      } else if (type == 'form9') {
        this.dia = [...this.formall9]
      } else if (type == 'form10') {
        this.dia = [...this.formall10]
      } else if (type == 'form11') {
        this.dia = [...this.formall11]
      } else if (type == 'form12') {
        this.dia = [...this.formall12]
      } else if (type == 'form13') {
        this.dia = [...this.formall13]
      }
      this.dia.forEach(ele => {
        ele.value = ''
      })
    },
    handleOk(value) {
      const xxx = {}
      this.dia.forEach((item, index) => {
        xxx[item.dataIndex] = item.value
      })
      // this.id = '1742369449645895682'
      if (!this.id) {
        this.id = this.$route.query.id
      }
      xxx.mainId = this.id
      if (this.type == 'form1') {
        addDevice(xxx).then(res => {
          this.getDeviceTable()
          this.getPrice()
          this.totalSmallAmount()
          this.getAllPrice()
        })
      } else if (this.type == 'form2') {
        addSoftDevice(xxx).then(res => {
          this.softDeviceTable()
          this.getPrice()
          this.getAllPrice()
          this.totalSmallAmount()
        })
        // this.formdataall2.push(xxx)
      } else if (this.type == 'form3') {
        // this.formdataall3.push(xxx)
        addmetral(xxx).then(res => {
          this.metralList()
          this.totalSmallAmount()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form4') {
        addFuel(xxx).then(res => {
          this.fuelList()
          this.getPrice()
          this.totalSmallAmount()
          this.getAllPrice()
        })
      } else if (this.type == 'form5') {
        addAssay(xxx).then(res => {
          this.assayList()
          this.totalSmallAmount()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form6') {
        xxx.headId = this.formal6Id
        addTrial(xxx).then(res => {
          this.trialList()
          this.totalSmallAmount()
          this.getPrice()
          this.findAllHeadTrial()
          this.getAllPrice()
        })
      } else if (this.type == 'form7') {
        addOut(xxx).then(res => {
          this.outList()
          this.totalSmallAmount()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form8') {
        xxx.deviceName = xxx.subjectName
        addPub(xxx).then(res => {
          this.pubList()
          this.totalSmallAmount()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form9') {
        addEx(xxx).then(res => {
          this.exList()
          this.totalSmallAmount()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form10') {
        addCon(xxx).then(res => {
          this.conList()
          this.getPrice()
          this.totalSmallAmount()
          this.getAllPrice()
        })
      } else if (this.type == 'form11') {
        addLu(xxx).then(res => {
          this.luList()
          this.totalSmallAmount()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form12') {
        addOther(xxx).then(res => {
          this.otherList()
          this.totalSmallAmount()
          this.getPrice()
          this.getAllPrice()
        })
      } else if (this.type == 'form13') {
        addIndirct(xxx).then(res => {
          this.indirctList()
          this.getPrice()
          this.totalSmallAmount()
          this.getAllPrice()
        })
      }
      this.visible = false

    },
    handleUpdate(value) {
      if (this.type == 'form1') {
        updateDevice(this.updateItem).then(res => {
          this.getDeviceTable()
          this.getPrice()
          this.totalSmallAmount()
        })
      } else if (this.type == 'form2') {
        updateSoftDevice(this.updateItem).then(res => {
          this.softDeviceTable()
          this.getPrice()
          this.totalSmallAmount()
        })
        // this.formdataall2.push(this.updateItem)
      } else if (this.type == 'form3') {
        // this.formdataall3.push(this.updateItem)
        updateMetral(this.updateItem).then(res => {
          this.metralList()
          this.getPrice()
          this.totalSmallAmount()
        })
      } else if (this.type == 'form4') {
        updateFuel(this.updateItem).then(res => {
          this.fuelList()
          this.getPrice()
          this.totalSmallAmount()
        })
      } else if (this.type == 'form5') {
        updateAssay(this.updateItem).then(res => {
          this.assayList()
          this.getPrice()
          this.totalSmallAmount()
        })
      } else if (this.type == 'form6') {
        this.updateItem.headId = this.formal6Id
        updateTrial(this.updateItem).then(res => {
          this.trialList()
          this.getPrice()
          this.totalSmallAmount()
        })
      } else if (this.type == 'form7') {
        updateOut(this.updateItem).then(res => {
          this.outList()
          this.getPrice()
          this.totalSmallAmount()
        })
      } else if (this.type == 'form8') {
        if (this.updateItem.id) {
          updatePub(this.updateItem).then(res => {
            this.pubList()
            this.getPrice()
            this.totalSmallAmount()
          })
        } else {
          addPub(this.updateItem).then(res => {
            this.pubList()
            this.getPrice()
            this.totalSmallAmount()
          })
        }
      } else if (this.type == 'form9') {
        if (this.updateItem.id) {
          updateEx(this.updateItem).then(res => {
            this.exList()
            this.getPrice()
            this.totalSmallAmount()
          })
        } else {
          addEx(this.updateItem).then(res => {
            this.exList()
            this.totalSmallAmount()
            this.getPrice()
            this.getAllPrice()
          })
        }

      } else if (this.type == 'form10') {
        updateCon(this.updateItem).then(res => {
          this.conList()
          this.getPrice()
          this.totalSmallAmount()
        })
      } else if (this.type == 'form11') {
        if (this.updateItem.id) {
          updateLu(this.updateItem).then(res => {
            this.luList()
            this.getPrice()
            this.totalSmallAmount()
          })
        } else {
          addLu(this.updateItem).then(res => {
            this.luList()
            this.totalSmallAmount()
            this.getPrice()
            this.getAllPrice()
          })
        }
      } else if (this.type == 'form12') {
        if (this.updateItem.id) {
          updateOther(this.updateItem).then(res => {
            this.otherList()
            this.getPrice()
            this.totalSmallAmount()
          })
        } else {
          addOther(this.updateItem).then(res => {
            this.otherList()
            this.totalSmallAmount()
            this.getPrice()
            this.getAllPrice()
          })
        }

      } else if (this.type == 'form13') {
        updateIndirct(this.updateItem).then(res => {
          this.indirctList()
          this.getPrice()
          this.totalSmallAmount()
        })
      }
      this.editVisible = false
    },
    handleCancel(value) {
      if (this.type == 'form1') {
        this.getDeviceTable()
      } else if (this.type == 'form2') {
        this.softDeviceTable()

        // this.formdataall2.push(xxx)
      } else if (this.type == 'form3') {
        // this.formdataall3.push(xxx)
        this.metralList()
      } else if (this.type == 'form4') {
        this.fuelList()

      } else if (this.type == 'form5') {
        this.assayList()

      } else if (this.type == 'form6') {
        this.findAllHeadTrial()
        this.trialList()
      } else if (this.type == 'form7') {
        this.outList()
      } else if (this.type == 'form8') {
        this.pubList()
      } else if (this.type == 'form9') {
        this.exList()
      } else if (this.type == 'form10') {
        this.conList()
      } else if (this.type == 'form11') {
        this.luList()
      } else if (this.type == 'form12') {
        this.otherList()
      } else if (this.type == 'form13') {
        this.indirctList()
      }

    },
    getBigId(id) {
      return this.smallList.filter(ele => ele.id == id)[0].categoryId
    },
    async getCateList(id) {
      let bigId = this.getBigId(id)
      let totalRes = await total()
      let dictTypeCode = totalRes.data.filter(ele => ele.id == bigId)[0].dictTypeCode
      let typeRes = await getByType({ dictTypeCode: dictTypeCode })
      return typeRes.data.map(ele => {
        return {
          dictTypeCode: ele.dictTypeCode,
          dictName: ele.dictName,
          orderNum: ele.orderNum
        }
      })

    }
  }
}
</script>

<style lang='less' scoped>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}

.content {
  height: 100%;
  width: 100%;
  padding-left: 20px;
  padding-top: 10px;

  .title {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0;

    div {
      display: flex;
      align-items: center;

      p {
        margin: 0;
      }
    }

    .op {
      height: 20px;
      width: 5px;
      background: #0084ff;
      margin-right: 10px;
    }

    .btn {
      button {
        margin-left: 10px;
      }
    }
  }

  .module-title {
    font-size: 18px;
    font-weight: 800;
    margin: 5px 0;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .module-title1 {
    display: flex;
    padding-bottom: 3px;
    border-bottom: 1px solid #e3e3e3;

    justify-content: space-between;
    align-items: center;

    p {
      margin: 0;
    }
  }

  .table-box {
    margin: 10px 0;

    .btn {
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
    }

    p {
      font-size: 12px;
      margin: 0;
    }
  }

  .card-box {
    width: 100%;
    display: flex;
    align-items: center;

    flex-wrap: nowrap;
    overflow-x: auto;

    .card {
      height: 80px;
      width: 20%;
      border: 1px solid #e3e3e3;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      padding: 10px 10px;
      box-sizing: border-box;
      word-break: keep-all;
      white-space: nowrap;

      h3 {
        font-size: 29px;
        font-weight: 800;
        margin: 0;

        span {
          font-size: 14px;
        }
      }

      p {
        font-size: 12px;
      }
    }
  }

}
</style>
